<template>
  <!-- 容器 -->
  <div ref="charts" class="charts" style1="width: 100%;height:100%;" />
</template>

<script>
// 引入 echatrs
// import echatrs from 'echarts'
import * as echarts from 'echarts'
export default {
  name: 'LineChart',
  props: ['linestate'],
  data() {
    return {
      lineCharts: null
    }
  },
  watch: {
    linestate() {
      // 配置数据
      this.lineCharts.setOption({
        // 文字提示
        tooltip: {},
        //
        xAxis: {
          // 隐藏X轴
          show: false,
          // 均分
          type: 'category'
        },
        yAxis: {
          // 隐藏Y轴
          show: false
        },
        // 系列
        series: [
          {
            type: 'line',
            // data: [10, 7, 33, 12, 48, 9, 29, 10, 44],
            data: this.linestate.visitTrend,
            // 设置拐点的透明度为0
            itemStyle: {
              opacity: 0.2
            },
            // 设置线段的颜色
            lineStyle: {
              color: 'purple'
            },
            // 区域填充样式
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'purple' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            // 线条弧度
            smooth: true
          }
        ],
        // 布局调试
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        }
      })
    }
  },
  mounted() {
    console.log('ioio', this.linestate)
    // 初始化echarts实例
    // const lineCharts = echarts.init(this.$refs.charts)
    this.lineCharts = echarts.init(this.$refs.charts)
    // // 配置数据
    // this.lineCharts.setOption({
    //   // 文字提示
    //   tooltip: {},
    //   //
    //   xAxis: {
    //     // 隐藏X轴
    //     show: false,
    //     // 均分
    //     type: 'category'
    //   },
    //   yAxis: {
    //     // 隐藏Y轴
    //     show: false
    //   },
    //   // 系列
    //   series: [
    //     {
    //       type: 'line',
    //       data: [10, 7, 33, 12, 48, 9, 29, 10, 44],
    //       // data: this.liststate.visitTrend,
    //       // 设置拐点的透明度为0
    //       itemStyle: {
    //         opacity: 0.2
    //       },
    //       // 设置线段的颜色
    //       lineStyle: {
    //         color: 'purple'
    //       },
    //       // 区域填充样式
    //       areaStyle: {
    //         color: {
    //           type: 'linear',
    //           x: 0,
    //           y: 0,
    //           x2: 0,
    //           y2: 1,
    //           colorStops: [{
    //             offset: 0, color: 'purple' // 0% 处的颜色
    //           }, {
    //             offset: 1, color: '#fff' // 100% 处的颜色
    //           }],
    //           global: false // 缺省为 false
    //         }
    //       },
    //       // 线条弧度
    //       smooth: true
    //     }
    //   ],
    //   // 布局调试
    //   grid: {
    //     left: 0,
    //     top: 0,
    //     right: 0,
    //     bottom: 0
    //   }
    // })
  }
}
</script>

<style scoped>
.charts {
  /* width: 100%;
    height: 100%; */
  width: 320px;
  height: 45px;
}
</style>
